<template>
  <div class="content">
    <div
      ref="charts"
      style="width: 500px; height: 400px;"
    />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getEchartsBar } from '@/api/mockEcharts'
export default {
  name: 'EchartsBar',
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    async initCharts() {
      const res = await getEchartsBar()
      this.list = res.data.list.map(item => {
        return item.num
      })
      const charts = echarts.init(this.$refs['charts'])
      const option = {
        title: {
          text: '广告管理',
          left: '40%'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'qqq', 'www', 'eee']
        },
        yAxis: {
          type: 'value',
          max: 40,
          min: 0
        },
        series: [
          {
            data: this.list,
            type: 'bar'
          }
        ]
      }
      charts.setOption(option)
    }
  }
}
</script>

<style>

</style>
